import React, { Component } from 'react';
import './index.less';
import PropTypes from 'prop-types';
import { Table } from 'antd';

const prefixCls = 'component-card';

const columns = [
  {
    title: '分类',
    dataIndex: 'classification',
    align: 'center',
    width: '25%'
  },
  {
    title: '组件',
    align: 'center',
    width: '20%',
    dataIndex: 'name'
  },
  {
    title: '版本',
    align: 'center',
    width: '20%',
    dataIndex: 'version'
  },
  {
    title: 'URL',
    align: 'center',
    width: '35%',
    dataIndex: 'url'
  }
];

class ComponentCard extends Component {
  render() {
    const { data } = this.props;
    return (
      <div className={`${prefixCls}`}>
        <div className={`${prefixCls}-header`}>组件</div>
        <Table
          pagination={false}
          className={`${prefixCls}-table`}
          columns={columns}
          dataSource={data}
          bordered
        />
      </div>
    );
  }
}

ComponentCard.propTypes = {
  data: PropTypes.array
};

export default ComponentCard;
